<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="referrer" content="no-referrer">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4726301_4po2rf0uw9n.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4800741_bj40vtwllsj.css">
    <link rel="stylesheet" href="../style/public.css">
    <link rel="stylesheet" href="./choose.css">
    <title>选车</title>

</head>

<body>
    <header class="pa10 baa fl fixed w100p">
        <span class="f16 fls0 fcc mr-10">南宁<i class="iconfont icon-xiajiantou f12 ml-5"></i></span>
        <div class="w100p rel">
            <input class="w100p ss" type="text" placeholder="品牌/车型/配置">
            <i class="iconfont icon-sousuo so abs f18"></i>
        </div>
    </header>
    <div style="height: 50px;"></div>

    <div class="content bafff">
        <div class="nav-bottom fca pt-10 pb-10">
            <a class="fcc fdc cdee" href="">
                <i class="iconfont icon-mk-tjxz f26"></i>
                <span class="mt-5">条件选车</span>
            </a>
            <a class="fcc fdc cdee" href="">
                <i class="iconfont icon-xiaoliang f26"></i>
                <span class="mt-5">销量排行</span>
            </a>
            <a class="fcc fdc cdee" href="">
                <i class="iconfont icon-xinche f26"></i>
                <span class="mt-5">新车上市</span>
            </a>
            <a class="fcc fdc cdee" href="">
                <i class="iconfont icon-qiche_m f30"></i>
                <span class="mt-5">购车优惠</span>
            </a>
        </div>

        <div class="tab pa10">
            <div class="nav-bottom fca">
                <a class="fcc fdc" href="">
                    <i class="iconfont icon-xiaomi f26 "></i>
                    <span class="mt-5">小米</span>
                </a>
                <a class="fcc fdc" href="">
                    <i class="iconfont icon-aodi f26 "></i>
                    <span class="mt-5">奥迪</span>
                </a>
                <a class="fcc fdc" href="">
                    <i class="iconfont icon-tesila f26 "></i>
                    <span class="mt-5">特斯拉</span>
                </a>
                <a class="fcc fdc" href="">
                    <i class="iconfont icon-Logo_Benz f26 "></i>
                    <span class="mt-5">奔驰</span>
                </a>
                <a class="fcc fdc" href="">
                    <i class="iconfont icon-gengduo f26 "></i>
                    <span class="mt-5">更多</span>
                </a>
            </div>
            <div class=" mt-20 fca">
                <span class="spitem fcc">SUV</span>
                <span class="spitem fcc">新能源</span>
                <span class="spitem fcc">油电混动</span>
                <span class="spitem fcc">更多类型</span>
            </div>
            <div class=" mt-10 fca">
                <span class="spitem fcc">5万以下</span>
                <span class="spitem fcc">5-10万</span>
                <span class="spitem fcc">10-15万</span>
                <span class="spitem fcc">更多条件</span>
            </div>
        </div>
    </div>

    <div class="logo-list bafff">
        <div v-for="(item, index) in letterList" :key="index" :id="item" class="logo-item">
            <h1 class="f14 baf5 w100p pl-10">{{ item }}</h1>
            <div v-for="(logoItem, index) in list" :key="item.id" v-if="logoItem.firstLetter === item"
                class="logo-info fl aic pl-10">
                <img :src="logoItem.imgUrl" alt="">
                <span class="f16 ml-10">{{ logoItem.name }}</span>
            </div>
        </div>

        <!-- 返回顶部 -->
        <div class="go-top fcc fdc dsn" @click="goTop">
            <i class="iconfont icon-fanhuidingbu"></i>
        </div>

        <div class="letter">
            <div v-for="(itemLet, indexLet) in letterList" :key="indexLet" @click="activeaaa = indexLet" class="fcc fdc">
                <a :class="{'active': indexLet === activeaaa}" :href="'#'+itemLet">{{ itemLet }}</a>
            </div>
        </div>
    </div>

    <div style="height: 50px;"></div>
    <footer class="footer w100p bafff fixed h50">
        <div class="footer-item fl aic jcsa">
            <a v-for="(item, index) in list" :key="item.id" :class="['footer-item fcc fdc', item.id === 3 ? 'cba' : '']"
                :href="item.herf">
                <i :class="['iconfont f22',item.icon]"></i>
                <span class="mt-5">{{ item.name }}</span>
            </a>
        </div>
    </footer>

    <script src="../js/axios.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/vue2.js"></script>
    <script src="../js/common.js"></script>

    <script>
        const logoList = new Vue({
            el: '.logo-list',
            data: {
                list: [],
                activeaaa: 0,
                letterList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
            },
            async created() {
                let response = await axios.get('http://localhost:3888/logo');
                this.list = response.data;
            },
            mounted() {
                // 页面滑动监听
                const elements = document.querySelectorAll('.logo-item[id]');
                const aTags = document.querySelectorAll('.letter a');
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        const targetId = entry.target.id;
                        aTags.forEach(aTag => {
                            if (aTag.getAttribute('href') === `#${targetId}`) {
                                aTag.classList.toggle('active', entry.isIntersecting);
                            }
                        });
                    });
                });
                elements.forEach(element => {
                    observer.observe(element);
                });
                window.addEventListener('scroll', () => {
                    const chooseTop = document.documentElement.scrollTop || document.body.scrollTop;
                    if (chooseTop > 500) {
                        $('.go-top').removeClass('dsn');
                    } else {
                        $('.go-top').addClass('dsn');
                    }
                });
            },
            methods: {
                goTop() {
                    $('html, body').animate({ scrollTop: 0 }, 'slow');
                },
            }
        });
    </script>

</body>

</html>